import React, { PureComponent } from 'react';
import {connect} from 'dva'
import {Icon, Modal} from 'antd'
import styles from './index.less'

import ListModal from './modal/list'
import CoverModal from './modal/cover'
import { EmptyVideo, ImgVideo } from './common'

@connect(state => ({
}))

export default class Body extends PureComponent {
  state = {
    visible: false,
    visibleCover: false,
    selectVideo: '',
    videoCoverUrl: '',
    isHover: false,
    visibleVisit: false,
    playUrl: '',
  }
  componentWillMount() {
    if(this.props.value.length) {
      this.setState({videoCoverUrl: this.props.value[0].videoCoverUrl, selectVideo: this.props.value[0]})
    }
  }
  changeVideoSelect = val => {
    this.setState({selectVideo: val})
  }
  showVideoModal = () => {
    this.setState({visible: true, });
  }
  handleVideoModalOk = (e) => {
    this.setState({visible: false,});
    this.showCoverModal()
  }
  handleVideoModalCancel = (e) => {
    this.setState({visible: false,});
  }

  showCoverModal = () => {
    this.setState({visibleCover: true, });
  }
  changeVideoCoverUrl = val => {
    this.setState({videoCoverUrl: val})
  }
  handleCoverModalOk = () => {
    this.setState({visibleCover: false,});
    let {selectVideo} = this.state
    let json = [{
      coverUrl: selectVideo.coverUrl,
      description: selectVideo.description,
      duration: selectVideo.duration,
      interactId: selectVideo.interactId,
      playUrl: selectVideo.playUrl,
      title: selectVideo.title,
      uploadTime: new Date(selectVideo.uploadTime).getTime(),
      videoCoverUrl: this.state.videoCoverUrl,
      videoId: selectVideo.videoId,
    }]
    this.props.handleChange(json)
  }
  handleCoverModalCancel = () => {
    this.setState({visibleCover: false,});
  }

  replaceImg = () => {
    this.setState({visibleCover: true})
  }

  deleteImg = () => {
    this.setState({
      selectVideo: '',
      videoCoverUrl: '',
    })
  }
  toggleHover = () => {
    this.setState({isHover: this.state.isHover})
  }
  onVisit = (val) => {
    if(val.interactId) {
      window.open(`https://duomeiti.taobao.com/interactiveVideo.htm?bizCode=DAREN&id=${val.interactId}&preview=true`);
    } else {
      this.setState({visibleVisit: true, playUrl: val.playUrl})
    }
  }
  toggleVisible = () => {

  }
  render() {
    let {
      tips, label,
      enableInteractVideo, enableNormalVideo, filterDurGreater, filterDurLess,
      addImageProps
    } = this.props;
    return (
      <div>
        <div className={styles['creator-add-video']}>
          {this.state.videoCoverUrl === ''
            ? <EmptyVideo handleClick={this.showVideoModal} label={label} />
            : <ImgVideo url={this.state.videoCoverUrl}
               replace={this.replaceImg}
               delete={this.deleteImg}
               onVisit={() => this.onVisit(this.state.selectVideo)}
              />
          }
        </div>
        <div className={styles['tips']}>
          {tips}
        </div>

        <ListModal
          visible={this.state.visible}
          handleOk={this.handleVideoModalOk}
          handleCancel={this.handleVideoModalCancel}
          onVideoRadioChange={this.changeVideoSelect}
          onVisit={this.onVisit}
          enableInteractVideo={enableInteractVideo}
          enableNormalVideo={enableNormalVideo}
          filterDurGreater={filterDurGreater}
          filterDurLess={filterDurLess}
        />
        <CoverModal
          visible={this.state.visibleCover}
          handleOk={this.handleCoverModalOk}
          handleCancel={this.handleCoverModalCancel}
          video={this.state.selectVideo}
          changeVideoCoverUrl={this.changeVideoCoverUrl}
          videoCoverUrl={this.state.videoCoverUrl}
          addImageProps={addImageProps}
        />

        <Modal
            title="预览"
            width={650}
            style={{ top: 20 }}
            visible={this.state.visibleVisit}
            onCancel={() => {this.setState({visibleVisit: false})}}
            bodyStyle={{ paddingTop: '10px', paddingBottom: '10px' }}
            footer={[]}
        >
          <div style={{height: 400, width: 600, position: 'relative', boxSizing: 'border-box'}}>
            预览地址：<a href={this.state.playUrl} target="_blank">http:{this.state.playUrl}</a>
            <video autoplay="" height="400" width="600"
              src={this.state.playUrl} controls="controls" preload="true" data-spm-anchor-id="a2116r.8866437.0.i11.1b424aa0DhOemb"
            >
              当前浏览器不支持 HTML5 video
            </video>
          </div>
        </Modal>
      </div>
    )
  }
}
